<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import Tile from 'ol/layer/Tile'
    import XYZ from 'ol/source/XYZ'
    import Graticule from 'ol/layer/Graticule'
    import Stroke from 'ol/style/Stroke'

    const graticule = new Graticule({
      strokeStyle: new Stroke({
        color: 'rgba(255, 120, 0, .5)', // 线条颜色
        width: 2, // 线条宽度
        lineDash: [4] // 虚线，每隔4像素
      }),
      showLabels: true
    })

    const init = () => {
      state.map = new Map({
        target: state.mapBox,
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [116.41400, 39.91500], // 北京坐标
          zoom: 7 // 地图缩放级别（打开页面时默认级别）
        })
      })

      graticule.setMap(state.map)
    }
    `
    return {
      code
    }
  }
}
</script>
